<template>
    <el-container>
        <el-header style="display:inline-block;vertical-align:middle">
            <img src="@/assets/logo.png" alt="" style="width: 40px;height:40px;display: inline;margin-top: 10px;float: right">
            <h1 style="display:inline;">ATF质量效率工具</h1>
        </el-header>
        <el-card shadow="always" style="margin-top: 20px; text-align: left">
                <h2 class="el-icon-box" >  用例池</h2><el-divider></el-divider>

                <div style="white-space: nowrap;height: 200px; text-align: center;line-height:100px;overflow-x: auto; color: white">

                    <el-popover
                            placement="right-end"
                            title="步骤列表"
                            width="500"
                            trigger="hover"
                            v-for="item in testcases"
                            v-bind:key="item.id"
                    >
                        <div  slot="reference"  style="background-color: darkviolet; width: 200px; height: 150px; border-radius: 10px; margin: 0 20px 0 20px; display: inline-block" @click="getTestCase(item.id)">
                            <h3>{{ item.name }}</h3>
                        </div>
                        <el-table :data="JSON.parse(item.steps)">
                            <el-table-column width="200" property="title" label="步骤"></el-table-column>
                            <el-table-column width="200" property="url" label="请求地址"></el-table-column>
                            <el-table-column width="100" property="method" label="请求方式"></el-table-column>
                        </el-table>
                    </el-popover>

                </div>
        </el-card>
        <el-container>

            <el-aside width="400px">
                <el-card shadow="always" style="margin-top: 20px">
                    <div style="text-align: left">
                        用例：
                        <el-select v-model="value" filterable clearable placeholder="请选择" @change="getSteps">
                            <el-option
                                    v-for="item in testcases"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                        <el-divider></el-divider>
                        <el-table
                                :data="tableData"
                                style="width: 100%" stripe border :header-cell-style="{background:'#084B8A',color:'#FFFFFF'}"
                                height="400"
                        >
                            <el-table-column
                                    prop="case"
                                    label="步骤列表">
                                <template slot-scope="scope">
                                    <el-tag effect="dark" type="success" v-if="scope.row.method==='get'" class="method">{{scope.row.method}}</el-tag>
                                    <el-tag effect="dark"  v-if="scope.row.method==='post'" class="method">{{scope.row.method}}</el-tag>
                                    <el-tag effect="dark" type="warning" v-if="scope.row.method==='put'" class="method">{{scope.row.method}}</el-tag>
                                    <el-tag effect="dark" type="danger" v-if="scope.row.method==='delete'" class="method">{{scope.row.method}}</el-tag>
                                    <span>{{scope.row.title}}</span>
                                    <el-tag effect="plain">{{scope.row.url}}</el-tag>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>
                <el-card shadow="always" style="margin-top: 20px">
                    <el-table
                            :data="reportData"
                            style="width: 100%" stripe border :header-cell-style="{background:'#8904B1',color:'#FFFFFF'}"
                            height="300"
                    >
                        <el-table-column
                                prop="case"
                                label="报告列表">
                            <template slot-scope="scope">

                                <div><h3><el-badge value="new" class="item">测试报告</el-badge></h3>  <span style="font-size: small">{{scope.row.date}}</span></div>

                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-aside>
            <el-main>
                <el-card shadow="always">
                    <div id="edit">
                        <h2 class="el-icon-edit">  步骤编辑</h2>
                        <el-popover
                                placement="right"
                                width="700"
                                trigger="click"
                                @show="getGlobalVars"
                        >
                            <el-button  type="primary" size="medium" style="float: left;margin: 10px" class="el-icon-plus" @click="addGlobalVarShow=true">新增</el-button>
                            <el-table :data="globalVars">
                                <el-table-column width="200" property="var_name" label="变量名称"></el-table-column>
                                <el-table-column width="200" property="init_value" label="初始值"></el-table-column>
                                <el-table-column width="200" property="current_value" label="当前值"></el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-popconfirm
                                                title="确定要删除吗？"
                                                @confirm="removeGlobalVar(scope.row.id)"
                                        >
                                            <el-button
                                                    slot="reference"
                                                    size="mini"
                                                    type="danger"
                                            >删除</el-button>
                                        </el-popconfirm>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-button slot="reference" type="primary" size="large" style="float: right;margin: 0 10px 0 10px" class="el-icon-view">全局变量</el-button>
                        </el-popover>

                        <el-dialog
                                title="新增全局变量"
                                :visible.sync="addGlobalVarShow"
                                width="30%"
                                center>
                            <el-input v-model="globalVarName" placeholder="请输入变量名称"></el-input>
                            <el-input v-model="globalVarInitValue" placeholder="请输入初始值"></el-input>
                            <el-button @click="addGlobalVarShow = false">取 消</el-button>
                            <el-button type="primary" @click="saveGlobalVar">保 存</el-button>
                        </el-dialog>

                        <el-popover
                                placement="right"
                                width="600"
                                trigger="click">
                            <el-button  type="primary" size="medium" style="float: left;margin: 10px; background-color: slateblue;" class="el-icon-plus">新增</el-button>
                            <el-table :data="globalVars">
                                <el-table-column width="200" property="var_name" label="变量名称"></el-table-column>
                                <el-table-column width="200" property="init_value" label="初始值"></el-table-column>
                                <el-table-column width="200" property="current_value" label="当前值"></el-table-column>
                            </el-table>
                            <el-button slot="reference"  type="primary" size="large" style="float: right;background-color: slateblue; margin: 0 10px 0 10px" class="el-icon-view">用例变量</el-button>
                        </el-popover>
                        <el-button @click="caseTableShow =true" type="primary" size="large" style="float: right;background-color:indianred;margin: 0 10px 0 10px" class="el-icon-view">查看用例池</el-button>
                        <el-button @click="show =true" type="primary" size="large" style="float: right;background-color: mediumpurple; margin: 0 10px 0 10px" class="el-icon-thumb">调试</el-button>
<!--                        <el-button @click="openLink('#/StepTable')" type="primary" size="large" style="float: right;background-color: dodgerblue; margin: 0 10px 0 10px" class="el-icon-monitor">全屏编辑</el-button>-->
                        <el-divider></el-divider>
                        <el-button @click="addRow" type="primary" size="small" v-show="show">增加一行</el-button>
                        <el-button @click="show = true" type="primary" size="small" v-show="!show">编辑</el-button>
                        <el-button @click="dialogVisible = true" size="primary" type="success" style="float: right" v-if="!value" v-show="show">提交至用例池</el-button>
                        <el-button @click="dialogVisible = true" size="primary" type="success" style="float: right;background-color: mediumpurple" v-else v-show="show">保存</el-button>
                        <el-popconfirm
                                title="取消会清空已编辑的内容，确定要取消吗？"
                                @confirm="cancel"
                        >
                            <el-button slot="reference" size="small" v-show="show">取消</el-button>
                        </el-popconfirm>
                        <el-button @click="removeRow" size="small" v-show="show" type="danger">删除</el-button>

                        <el-dialog
                                title="提交用例"
                                :visible.sync="dialogVisible"
                                width="30%"
                                center>
                            <span>用例名称</span>
                            <el-input v-model="caseName" ></el-input>
                            <el-button @click="dialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="saveCase">保 存</el-button>
                        </el-dialog>

                        <el-dialog title="用例池列表" :visible.sync="caseTableShow" >
                            <el-table :data="testcases" height="600">
                                <el-table-column
                                        type="index"
                                        width="50">
                                </el-table-column>
                                <el-table-column property="name" label="用例名称" width="300"></el-table-column>
                                <el-table-column property="create_time" label="创建时间" width="200"></el-table-column>
                                <el-table-column property="update_time" label="更新时间" width="200"></el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-popconfirm
                                                title="确定要删除吗？"
                                                @confirm="deleteCase(scope.row.id)"
                                        >
                                            <el-button
                                                    slot="reference"
                                                    size="mini"
                                                    type="danger"
                                            >删除</el-button>
                                        </el-popconfirm>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-dialog>
                        <el-table :data="tabledatas" border stripe :header-cell-style="{background:'#5882FA',color:'#FFFFFF', height:30}" size="small"
                                  @selection-change="handleSelectionChange" :row-style="{height:'100px'}" height="700"
                        >

                            <el-table-column
                                    type="selection"
                                    width="55" v-if="show"
                                    fixed
                            >
                            </el-table-column>
                            <el-table-column
                                    type="index"
                                    width="50"
                                    label="序号"
                                    fixed
                            >
                            </el-table-column>
                            <el-table-column label="步骤" width="150" fixed>
                                <template slot-scope="scope">

                                    <el-input placeholder="请输入内容" v-show="show" v-model="scope.row.title"></el-input>
                                    <span slot="reference" v-show="!show">{{scope.row.title}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="路径" width="200">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入内容" v-show="show" v-model="scope.row.url"></el-input>
                                    <span v-show="!show">{{scope.row.url}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="方法" width="120">
                                <template slot-scope="scope">
                                    <el-select v-model="scope.row.method" placeholder="请选择" v-show="show">
                                        <el-option label="get" value="get"></el-option>
                                        <el-option label="post" value="post"></el-option>
                                        <el-option label="put" value="put"></el-option>
                                        <el-option label="delete" value="delete"></el-option>
                                    </el-select>
                                    <span v-show="!show">{{scope.row.method}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="请求头" width="150">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入内容" v-show="show" v-model="scope.row.headers"></el-input>
                                    <el-popover
                                            placement="top-start"
                                            title="params"
                                            width="200"
                                            trigger="hover"
                                            :content="scope.row.headers">
                                        <span v-show="!show" slot="reference">{{scope.row.headers}}</span>
                                    </el-popover>
                                </template>
                            </el-table-column>
                            <el-table-column label="请求参数" width="150">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入内容" v-show="show" v-model="scope.row.params"></el-input>
                                    <el-popover
                                            placement="top-start"
                                            title="params"
                                            width="200"
                                            trigger="hover"
                                            :content="scope.row.params">
                                        <span v-show="!show" slot="reference">{{scope.row.params}}</span>
                                    </el-popover>
                                </template>
                            </el-table-column>
                            <el-table-column label="请求表单" width="150">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入内容" v-show="show" v-model="scope.row.data"></el-input>
                                    <el-popover
                                            placement="top-start"
                                            title="data"
                                            width="200"
                                            trigger="hover"
                                            :content="scope.row.data">
                                        <span v-show="!show" slot="reference">{{scope.row.data}}</span>
                                    </el-popover>
                                </template>
                            </el-table-column>
                            <el-table-column label="请求体" width="150">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入内容" v-show="show" v-model="scope.row.json"></el-input>
                                    <el-popover
                                            placement="top-start"
                                            title="json"
                                            width="200"
                                            trigger="hover"
                                            :content="scope.row.json">
                                        <span v-show="!show" slot="reference">{{scope.row.json}}</span>
                                    </el-popover>
                                </template>
                            </el-table-column>
                            <el-table-column label="JSONPATH提取" width="150">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入内容" v-show="show" v-model="scope.row.jsonpath_exp_save"></el-input>
                                    <span v-show="!show">{{scope.row.jsonpath_exp_save}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="正则表达式提取" width="150">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入内容" v-show="show" v-model="scope.row.regular_exp_save"></el-input>
                                    <span v-show="!show">{{scope.row.regular_exp_save}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="JSONPATH断言" width="150">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入内容" v-show="show" v-model="scope.row.jsonpath_exp_assertion"></el-input>
                                    <span v-show="!show">{{scope.row.jsonpath_exp_assertion}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="正则表达式断言" width="150">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入内容" v-show="show" v-model="scope.row.regular_exp_assertion"></el-input>
                                    <span v-show="!show">{{scope.row.regular_exp_assertion}}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>

import {queryTestCaseList, saveTestCase, updateTestCase, deleteTestCase} from "@/apis/testcase";
import {queryGlobalVarList, addGlobalVar, deleteGlobalVar} from "@/apis/globalvar";


  export default {
    // name: "main",
    data() {
      return {
          caseName: "",
          tableData: [],
          addGlobalVarShow: false,
          caseTableShow: false,
          testcases: [],
          value: '',
          globalVars: [],
          caseVars: [],
          reportData: [
              {
                  date: "2020/10/31 15:30:21"
              },
              {
                  date: "2020/10/31 15:30:22"
              },
              {
                  date: "2020/10/31 15:30:25"
              },
              {
                  date: "2020/10/31 15:30:30"
              },
          ],
          tableHeaders: [
              'title', 'url' ,'method',  'headers' ,'params' , 'data',  'json'  ,'jsonpath_exp_save' ,'regular_exp_save',  'jsonpath_exp_assertion' , '0..'
          ],
          multipleSelection: [],
          tabledatas: [

          ],
          show: false,
          dialogVisible: false,
          globalVarInitValue: '',
          globalVarName: ''
      }
    },
      methods:{
          getTestCases(){
              queryTestCaseList('', 10000, 1).then(res=>{
                  this.testcases = res.data;
              })

          },
          getTestCase(id){
              this.value=id;
              this.getSteps();
          },
          saveCase(){
              if (this.tabledatas.length === 0){
                  this.$message({
                      message: '请先添加用例步骤',
                      type: 'warning'
                  });
                  return;
              }
              if (this.value){
                  let data = {
                      name: this.caseName,
                      steps: JSON.stringify(this.tabledatas)
                  };
                  updateTestCase(this.value, data).then((res)=>{
                      if (res.code===200){
                          this.$message({
                              message: '更新成功',
                              type: 'success'
                          });
                          this.dialogVisible = false;
                          this.getTestCases();
                      }else {
                          this.$message({
                              message: res.msg,
                              type: 'error'
                          });
                      }

                  });
              } else {

                  let data = {
                      name: this.caseName,
                      steps: JSON.stringify(this.tabledatas)
                  };
                  saveTestCase(data).then((res)=>{
                      if (res.code===200){
                          this.$message({
                              message: '添加成功',
                              type: 'success'
                          });
                          this.dialogVisible = false;
                          this.tabledatas = [];
                          this.getTestCases();
                      }else {
                          this.$message({
                              message: res.msg,
                              type: 'error'
                          });
                      }

                  });
              }


          },
          getSteps(){
              let id = this.value;
              if (!id){
                  this.tableData = [];
                  this.tabledatas = [];
                  this.caseName = "";
                  return;
              }
              let testcase = this.testcases.find((n)=>(n.id===id));
              this.caseName = testcase.name;
              let steps;
              try {
                  steps = JSON.parse(testcase.steps)
              }catch (e) {
                  steps = []
              }
              this.tableData = JSON.parse(JSON.stringify(steps));
              this.tabledatas = JSON.parse(JSON.stringify(steps));
              if (steps.length === 0){
                  this.$message({
                      message: '该用例没有添加步骤',
                      type: 'warning'
                  });
              }else {
                  this.$message({
                      message: '获取步骤成功',
                      type: 'success'
                  });
              }
              this.show=false;
          },
          deleteCase(id){
              deleteTestCase(id).then((res)=>{
                  if (res.code===200){
                      this.$message({
                          message: '删除成功',
                          type: 'success'
                      });
                      this.getTestCases('');
                  }else {
                      this.$message({
                          message: res.msg,
                          type: 'error'
                      });
                  }

              });
          },
          addRow(){
              this.tabledatas.push(
                  { title: '', url: '', method:'', headers: '', params:'', data:'', json:'', jsonpath_exp_save:'', regular_exp_save:'', jsonpath_exp_assertion:'', regular_exp_assertion:''}
              );
          },
          handleSelectionChange(val) {
              this.multipleSelection = val;
          },
          removeRow(){
              for (let index in this.multipleSelection){
                  let tableIndex = this.tabledatas.indexOf(this.multipleSelection[index]);
                  this.tabledatas.splice(tableIndex, 1);
              }
          },
          openLink(url){
              window.open(url, '_blank')
          },
          cancel(){
              this.show=false;
              this.tabledatas = JSON.parse(JSON.stringify(this.tableData));
          },
          getGlobalVars(){
            queryGlobalVarList(10000, 1).then((res)=> {
               this.globalVars = res.data;
            }) ;
          },
          saveGlobalVar() {
              let data = {
                  var_name: this.globalVarName,
                  init_value: this.globalVarInitValue
              };
              addGlobalVar(data).then((res) => {
                  if (res.code === 200) {
                      this.$message({
                          message: '添加成功',
                          type: 'success'
                      });
                      this.addGlobalVarShow = false;
                  } else {
                      this.$message({
                          message: res.msg,
                          type: 'error'
                      });
                  }
              });
              this.globalVarName='';
              this.globalVarInitValue='';
          },
          removeGlobalVar(id){
              deleteGlobalVar(id).then((res)=>{
                  if (res.code===200){
                      this.$message({
                          message: '删除成功',
                          type: 'success'
                      });
                      this.getGlobalVars();
                  }else {
                      this.$message({
                          message: res.msg,
                          type: 'error'
                      });
                  }

              });
          }
      },
      created(){
          this.getTestCases()
      },
    components: {
    }
  }
</script>

<style scoped>
    .el-header, .el-footer {
        background-color: darkslateblue;
        color: white;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        /*background-color: #D3DCE6;*/
        /*color: #333;*/
        text-align: center;
        /*line-height: 200px;*/
    }

    .el-main {
        /*background-color: #E9EEF3;*/
        /*color: #333;*/
        text-align: left;
        line-height: 50px;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    /*.el-container:nth-child(5) .el-aside,*/
    /*.el-container:nth-child(6) .el-aside {*/
    /*    line-height: 260px;*/
    /*}*/

    /*.el-container:nth-child(7) .el-aside {*/
    /*    line-height: 320px;*/
    /*}*/

    .el-button {
        margin-left: 10px;
    }

    .el-card{
        border-radius: 15px;
    }

    .el-tag {
        margin: 0 10px 0 10px;
    }

    .method {
        width: 60px;
        text-align: center;
    }

    #edit {
        text-align: left;
        line-height: 50px;
    }
</style>